<template>
	<div>
		<ul class="header">
			<li class="date fl">
				<span>{{day}}</span>
				<p>十二月</p>
			</li>
			<li class="morging fl">
				<span>{{morgin}}</span>
			</li>
			<div class="login fr"></div>
			<div class="clear"></div>
		</ul>
		<div class="banner">
			<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
				<van-swipe-item v-for='item in newlist_top' :key='item.id'>
					<img :src="item.image" />
					<div class="word">
						<h3>{{ item.title }}</h3>
						<span>{{ item.hint }}</span>
					</div>
				</van-swipe-item>
			</van-swipe>
		</div>
		<div class="list1">
			<van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
				<van-cell v-for="item in newlist" :key="item.id" @click="getdetail(item.id)">
					<div class="listleft fl">
						<h3>{{ item.title }}</h3>
						<p>{{ item.hint }}</p>
					</div>
					<div class="listright fr">
						<img :src="item.images" alt="">
					</div>
					<div class="clear"></div>
				</van-cell>

				<div>
					<van-cell v-for="item in oldlist" :key="item.id">
						<p></p>
						<div>
							<van-cell v-for="i in list2" :key="i.id">
								<div class="listleft fl">
									<h3>{{ i.title }}</h3>
									<p>{{ i.hint }}</p>
								</div>
								<div class="listright fr">
									<img :src='i.images' alt="">
								</div>
								<div class="clear"></div>
							</van-cell>
						</div>
					</van-cell>
				</div>
			</van-list>
		</div>

	</div>
</template>

<script>
	export default {
		data() {
			return {
				day: '',
				yuefen: null,
				morgin: null,
				month:null,
				// list:[],
				newlist_top: [],
				newlist: [],
				oldlist: [],
				loading: false,
				finished: false,
				date1: 20201215,
				list2: []
			}
		},
		mounted() {
			this.gettime()
			this.getlist()
			this.getoldlist()
		},
		methods: {
			onLoad() {
				// 异步更新数据
				// setTimeout 仅做示例，真实场景中一般为 ajax 请求
				setTimeout(() => {
					for (let i = 0; i < 1; i++) {
						this.date1--
						console.log(this.date1)
					}

					// 加载状态结束
					this.loading = false;
					// console.log(this.list)
					// 数据全部加载完成
					if (this.list2.length >= 12) {
						this.finished = true;
					}
				}, 1000);
			},
			getlist: function() {
				this.$http.get('http://chonghekj.com/daily/index.php/Home/daily/latest', {})
					.then((res) => {
						this.newlist = res.data.stories
						this.newlist_top = res.data.top_stories
					})
			},
			getoldlist: function() {
				this.$http.get('http://chonghekj.com/daily/index.php/Home/daily/before', {
						params: {
							date: this.date1
						}
					})
					.then((res) => {
						this.oldlist = res.data.stories
						this.list2 = res.data.stories

						// for(let i=0; i<this.list2.length;i++){
						// 	this.oldlist.push(this.list2[i])
						// }
						console.log(res)
					})
			},
			getdetail: function(id) {
				this.$router.push({
					path: '/detail',
					query: {
						id
					}
				})
			},
			gettime: function() {
				let data = new Date()
				this.day = data.getDate() < 10 ? "0" + data.getDate() : data.getDate()
				this.month = data.getMonth() + 1
				// console.log(this.month)
				let hours = data.getHours() < 10 ? "0" + data.getHours() : data.getHours()
				if (hours >= 6 && hours <= 10) {
					this.morgin = "早上好！"
				} else if (hours > 10 && hours <= 12) {
					this.morgin = "上午好！"
				} else if (hours > 12 && hours <= 18) {
					this.morgin = "下午好！"
				} else {
					this.morgin = "晚上好！"
				}
				switch (this.month) {
					case 1:
						return "一月";
						// break
					case 2:
						return "二月";
						// break
					case 3:
						return  "三月"
						// break
					case 4:
						return "四月"
						// break
					case 5:
						return "五月"
						// break
					case 6:
						return "六月"
						// break
					case 7:
						return "七月"
						// break
					case 8:
						return "八月"
						// break
					case 9:
						return "九月"
						// break
					case 10:
						return "十月"
						// break
					case 11:
						return "十一月"
						// break
					case 12:
						return "十二月"
						// break
				}

			}
		},
		watch: {
			date1: function() {
				this.getoldlist()
			}
		}
	}
</script>

<style lang="less">
	* {
		margin: 0;
		padding: 0;
	}

	.fl {
		float: left;
	}

	.fr {
		float: right;
	}

	.clear {
		clear: both;
	}

	.header {
		padding: 10px 20px;

		.date {
			width: 48px;
			text-align: center;
			border-right: 1px solid #ddd;
			padding: 0 16px 0 0;

			p {
				margin-top: 6px;
			}
		}

		.morging {
			width: 136px;
			padding: 6px 20px;
			box-sizing: border-box;
			font-size: 24px;
		}

		.login {
			width: 50px;
			height: 50px;
			background: #ddd;
			border-radius: 50%;
		}
	}

	.banner {
		.my-swipe .van-swipe-item {
			position: relative;

			img {
				width: 100%;
			}

			.word {
				padding: 20px;
				position: absolute;
				bottom: 0;
				left: 0;

				h3 {
					color: #fff;
				}

				span {
					color: #AEAEB9;
				}
			}
		}

		.van-swipe__indicators {
			left: 86%;

			.van-swipe__indicator--active {
				border-radius: 10px;
				width: 20px;
			}
		}
	}

	.list1 {
		padding: 0 20px;

		.listleft {
			width: calc(100% - 82px);

			p {
				color: #AEAEB9;
				margin-top: 10px;
			}
		}

		.listright img {
			width: 70px;
			height: 70px;
			border-radius: 4px;
		}
	}
</style>
